<?php
$p = \Yii::$app->controller->module->templateAsset."/xinjunhun/";
?>

<style type="text/css">
	
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 815px;
    position: absolute;
    overflow: hidden;
}
#container > div,#container > img
{
    position: absolute;
}
#yan1
{
    left: -500px;
    -webkit-animation: yan1 4s linear infinite;
}
#yan2
{
    left: -500px;
    -webkit-animation: yan1 4s 1.3s linear infinite;
}
#yan3
{
    left: -500px;
    -webkit-animation: yan1 4s 2.6s linear infinite;
}
.chilun1
{
    left: 154px;
    top: 0px;
    position: absolute;
    -webkit-animation: rotateing1 4s linear infinite;
}
.chilun2
{
    left: 99px;
    top: 27px;
    position: absolute;
    -webkit-animation: rotateing1 4s linear infinite;
}
.chilun3
{
    left: 132px;
    top: 11px;
    position: absolute;
    width: 60px;
    -webkit-animation: rotateing 4s linear infinite;
}
.zi1
{
    left: 11px;
    top: 53px;
    position: absolute;

}
.zi2
{
    left: 11px;
    top: 53px;
    position: absolute;
    -webkit-animation: clipmove 3s linear infinite;
    /*-webkit-clip-path: polygon(-25% 0%, -30% 100%,-5% 100%,0% 0%);*/
}



#lineup > img,#linedown > img
{
    position: absolute;
}

#lineup
{
    left: -18px;
    top: 373px;
    opacity: 0;
    -webkit-transform: translate(0px,-163px);
}
#linedown
{
    left: -8px;
    top: 382px;
    opacity: 0;
    -webkit-transform: translate(0px,163px);
}
#titlebg
{
    width: 448px;
    height: 320px;
    left: 39px;
    top: 216px;
    /* background-color: rgba(186,1,180,0.3); */
    background-image: url(<?=$p?>images/TB2q5zmtFXXXXbEXpXXXXXXXXXX_!!1016194477.png);
    background-repeat: no-repeat;
    opacity: 0;
}
#div1,#div2
{
    position: absolute;
    left: 40px;
    width: 420px;
    overflow: hidden;
    opacity: 0;
}
#decro
{
    left: 261px;
    top: 329px;
    position: absolute;
    -webkit-transform: translate(0px,160px);
}
#titlecover
{
    background-color: #E3E7EC;
    position: absolute;
    left: 34px;
    top: 216px;
    width: 431px;
    height: 320px;
    -webkit-clip-path: polygon(18px 0px, 0px 19px ,0px 320px,412px 320px, 434px 302px,431px 0px);
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: scale(1,0);
}
.huo1
{
    position: absolute;
    left: 290px;
    width: 130px;
    top: 822px;
    -webkit-transform: rotate(-26deg);
    -webkit-animation: huo1 6s 0.5s linear infinite;
}
.huo2
{
    position: absolute;
    left: 250px;
    width: 130px;
    top: 822px;
    -webkit-transform: rotate(-26deg);
    -webkit-animation: huo2 6s linear infinite;
}
.huo3
{
    position: absolute;
    -webkit-transform: scale(0.2,1);
    top: 697px;
    left: -186px;
    -webkit-animation: huo3 6s linear infinite;
    -webkit-transform-origin: 100% 50%;
}
.huo4
{
    left: -20px;
    top: 600px;
    position: absolute;
    -webkit-animation: huo4 6s linear infinite;
}
.huo5
{
    left: -19px;
    top: 647px;
    position: absolute;
    -webkit-animation: huo5 7s 3s linear infinite;
}
.huo6
{
    left: 100px;
    top: 815px;
    position: absolute;
    -webkit-animation: huo6 3s linear infinite;
}
.huo7
{
    left: 50px;
    top: 815px;
    position: absolute;
    -webkit-animation: huo7 3s linear infinite;
    opacity: 0.5;
}
.huo8
{
    left: -59px;
    top: 677px;
    position: absolute;
    opacity: 0.5;
    -webkit-animation: huo5 7s 4s linear infinite;
}
#div1,#div2
{
    -webkit-clip-path: polygon(20px 0px,0px 20px, 0% 100% ,100% 100%, 100% 0%);
}
</style>
<style type="text/css">
@-webkit-keyframes huo7
{
    0%  {-webkit-transform: translate(0px,0px);}
    /*25% {-webkit-transform: translate(450px,-300px);}*/
    100%{-webkit-transform: translate(550px,-200px);}
}
@-webkit-keyframes huo6
{
    0%  {-webkit-transform: translate(0px,0px);}
    /*25% {-webkit-transform: translate(450px,-300px);}*/
    100%{-webkit-transform: translate(450px,-300px);}
}
@-webkit-keyframes huo5
{
    0%  {-webkit-transform: translate(0px,0px);}
    5%  {-webkit-transform: translate(166px,-79px) rotate(20deg);}
    7%  {-webkit-transform: translate(194px,-75px) rotate(40deg);}
    9%  {-webkit-transform: translate(187px,-51px) rotate(100deg);}
    11% {-webkit-transform: translate(207px,-45px) rotate(20deg);}
    25% {-webkit-transform: translate(540px,-225px) rotate(0deg);}
    100%{-webkit-transform: translate(540px,-225px);}

}
@-webkit-keyframes huo4
{
    0%  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    5%  {-webkit-transform: translate(85px,-49px) rotate(10deg);}
    10% {-webkit-transform: translate(170px,-111px) rotate(20deg);}
    15% {-webkit-transform: translate(293px,-152px) rotate(30deg);}
    20% {-webkit-transform: translate(423px,-171px) rotate(40deg);}
    25% {-webkit-transform: translate(524px,-148px) rotate(50deg);}
    100%{-webkit-transform: translate(524px,-148px) rotate(0deg);}
}
@-webkit-keyframes huo3
{
    0%  {-webkit-transform: scale(0.2,1);-webkit-animation-timing-function: ease-in;}
    30% {-webkit-transform: translate(666px,-170px) scale(1,1) rotate(-24deg);}
    100%{-webkit-transform: translate(666px,-170px) scale(1,1) rotate(-24deg);}
}
@-webkit-keyframes huo1
{
    0%  {-webkit-transform: rotate(-26deg);}
    75%  {-webkit-transform: rotate(-26deg);}
    100%{-webkit-transform: translate(192px,-183px) rotate(-54deg)}
}
@-webkit-keyframes huo2
{
    0%  {-webkit-transform: rotate(-26deg);}
    70%  {-webkit-transform: rotate(-26deg);}
    100%{-webkit-transform: translate(212px,-223px) rotate(-60deg)}
}
@-webkit-keyframes yan1
{
    from  {-webkit-transform: translate(0px,0px) rotate(-30deg) scale(1.3);}
    to    {-webkit-transform: translate(1200px,0px) rotate(-30deg) scale(1.3);}
}
@-webkit-keyframes rotateing
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes rotateing1
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(-360deg);}
}
@-webkit-keyframes clipmove
{
    0%    {-webkit-clip-path: polygon(-25% 0%, -50% 100%,-25% 100%,0% 0%);}
    50%   {-webkit-clip-path: polygon(125% 0%, 100% 100%,125% 100%, 150% 0%);}
    100%  {-webkit-clip-path: polygon(125% 0%, 100% 100%,125% 100%, 150% 0%);}
}

@-webkit-keyframes lineup
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,-120px);}
}
@-webkit-keyframes linedown
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(0px,120px);}
}
@-webkit-keyframes titlescale
{
    from  {-webkit-transform: scale(1,0);}
    to    {-webkit-transform: scale(1,1);}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes title_out
{
    from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
    to    {opacity: 0.5;-webkit-transform: translate(500px,0px) scale(1);}
}
@-webkit-keyframes divbegin
{
    from  {-webkit-transform: scale(1,0);opacity: 0}
    to    {-webkit-transform: scale(1,1);opacity: 1}
}
@-webkit-keyframes titlecover
{
    0%  {-webkit-transform: scale(1,0);}
    100%    {-webkit-transform: scale(1,1);}
}

</style>

<div id='container'>
    <img src='<?=$p?>images/TB2CZD.tFXXXXXkXXXXXXXXXXXX_!!1016194477.png'>



    <img class='huo8' src='<?=$p?>images/TB27E6vtFXXXXXFXpXXXXXXXXXX_!!1016194477.png'>
    <img class='huo7' src='<?=$p?>images/TB27E6vtFXXXXXFXpXXXXXXXXXX_!!1016194477.png'>

    <div id='div1'>
        <img id='img1' style='position:absolute'>
    </div>
    <div id='div2'>
        <img id='img2' style='position:absolute'>
    </div>

    <div id='titlebg'>
    </div>
    <div id='pagetitle' style='position:absolute;width:340px;height:226px;top:260px;left:80px;font-size:30px;color:#000;overflow:hidden;line-height:55px;text-shadow: 0px 2px 10px #fff;font-weight: bold;opacity:0;'>
        <div style='position:absolute;width:340px;height:226px;top:0px;left:0px;overflow:hidden;'>
            <div style='position:absolute;width:340px;height:226px;display:table;overflow:hidden;'>
                <div id='titlecontent' style='width:340px;height:226px;vertical-align:middle;display:table-cell;text-align:center;'></div>
            </div>
        </div>
    </div>

    <div id='lineup'>
        <img style='left:58px;top:0px;width:426px;' src='<?=$p?>images/TB2agPutFXXXXcHXXXXXXXXXXXX_!!1016194477.png'>

    </div>
    <div id='linedown'>
        <img style='left:39px;top:-135px;' src='<?=$p?>images/TB2TEYNtFXXXXbBXXXXXXXXXXXX_!!1016194477.png'>
    </div>
    <div id='titlecover'>
    </div>
    <div id='decro'>
        <img class='chilun1' src='<?=$p?>images/TB2w1bttFXXXXcCXXXXXXXXXXXX_!!1016194477.png'>
        <img class='chilun2' src='<?=$p?>images/TB2w1bttFXXXXcCXXXXXXXXXXXX_!!1016194477.png'>
        <img class='chilun3' src='<?=$p?>images/TB2S3votFXXXXbaXpXXXXXXXXXX_!!1016194477.png'>
        <img class='zi1' src='<?=$p?>images/TB2ijr3tFXXXXX.XXXXXXXXXXXX_!!1016194477.png'>
        <img class='zi2' src='<?=$p?>images/TB2qZvntFXXXXbmXpXXXXXXXXXX_!!1016194477.png'>
    </div>

    <img class='huo1' src='<?=$p?>images/TB2m.TctFXXXXcZXpXXXXXXXXXX_!!1016194477.png'>
    <img class='huo2' src='<?=$p?>images/TB2m.TctFXXXXcZXpXXXXXXXXXX_!!1016194477.png'>
    <img class='huo3' src='<?=$p?>images/TB2m.TctFXXXXcZXpXXXXXXXXXX_!!1016194477.png'>
    <img class='huo4' src='<?=$p?>images/TB2Ktb8tFXXXXXBXXXXXXXXXXXX_!!1016194477.png'>
    <img class='huo5' src='<?=$p?>images/TB27E6vtFXXXXXFXpXXXXXXXXXX_!!1016194477.png'>
    <img class='huo6' src='<?=$p?>images/TB27E6vtFXXXXXFXpXXXXXXXXXX_!!1016194477.png'>

    <img id='yan1' src='<?=$p?>images/TB2qvzctFXXXXcZXpXXXXXXXXXX_!!1016194477.png'>
    <img id='yan2' src='<?=$p?>images/TB2qvzctFXXXXcZXpXXXXXXXXXX_!!1016194477.png'>
    <img id='yan3' src='<?=$p?>images/TB2qvzctFXXXXcZXpXXXXXXXXXX_!!1016194477.png'>
</div>

<script>

function id(name)
{
    return document.getElementById(name)
}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=5000;
var timeout = [];

function id(name)
{
    return document.getElementById(name);
}

function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();

    bl_keepload = 'first';
    step_load();      
}

//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}
 

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            zmtxifenbao();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    zmtxifenbao();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            zmtxifenbao();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    zmtxifenbao();
                },dis_titletime);
        }

    }
}

function showtitle()
{

    id('titlecover').style.webkitAnimation = 'titlecover 0.7s ease both , fadeout 1s 0.5s linear both';

    timeout[4] = setTimeout(function()
    {
        id('lineup').style.opacity = 1;
        id('linedown').style.opacity = 1;
        id('titlebg').style.opacity = 1;
    },700)
    // id('titlebg').style.webkitAnimation = 'titlescale 0.6s linear both';

    id('titlecontent').innerHTML = desc;
    id('pagetitle').style.webkitAnimation = 'fadein 0.1s 0.5s linear both';

}
function zmtxifenbao()
{
    // return;

    setImageindex();
    set_img_position(1);
    create_img_ani(false);

    timeout[1] = setTimeout(show2,4000)
}

function show2()
{
    
    create_img_ani(true,2);
    set_img_position(2);

    timeout[2] = setTimeout(show1,4000);
}

function show1()
{
    create_img_ani(true,1);

    timeout[3] = setTimeout(show2,4000)
}

function create_img_ani(img_bool,pageindex)
{
    var framesname = 'ani_' + get_pid(Onload_imgs_url[image_url_index]);
     framesname  = framesname.replace('.jpg',"");
    // framesname  = 'ani'+framesname.replace('?imageMogr2/auto-orient/',"");
    if(img_bili<0.7)
    {
        changeheight = 313;
    }
    else
    {
        changeheight = img_height/2;
    }

    if(!img_bool)
    {
        var csstext = '@-webkit-keyframes '+framesname + 'toup {0% {-webkit-transform:translate(0px,-162px)} 90% {-webkit-transform:translate(0px,-'+(changeheight+10)+'px)}  100% {-webkit-transform:translate(0px,-'+changeheight+'px)}}';
        var style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;

        sheet.insertRule(csstext,0);
        id('lineup').style.webkitAnimation = framesname + 'toup 0.5s linear both';

        csstext = '@-webkit-keyframes '+framesname + 'todown {0% {-webkit-transform:translate(0px,162px)} 90% {-webkit-transform:translate(0px,'+(changeheight+10)+'px)}  100% {-webkit-transform:translate(0px,'+changeheight+'px)}}';
        style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);
        id('linedown').style.webkitAnimation = framesname + 'todown 0.5s linear both';
        id('decro').style.webkitAnimation = framesname + 'todown 0.5s linear both';

        csstext = '@-webkit-keyframes '+framesname + 'toscale {0% {-webkit-transform:scale(1,'+(162/changeheight)+');opacity:0} 100% {-webkit-transform: scale(1,1);opacity:1}}'
        var style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);

        id('div1').style.webkitAnimation = framesname + 'toscale 0.5s ease both';

        csstext = '@-webkit-keyframes titletoscale {0% {-webkit-transform: scale(1,1);opacity:1} 100% {-webkit-transform: scale(1,'+(changeheight/162)+');opacity:0}}'
        var style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);

        id('titlebg').style.webkitAnimation = 'titletoscale 0.5s ease both';
        id('pagetitle').style.webkitAnimation = 'titletoscale 0.5s ease both';


        id('div1').style.webkitAnimation = framesname + 'toscale 0.5s ease-in both';

    }
    else
    {
        image_url_index++;
        setImageindex();

        var next_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
        var next_name = url_name(Onload_imgs_url[image_url_index]);
		  next_name  = next_name.replace('.jpg',"");
        if(next_bili<0.7)
        {
            next_height = 313;
        }
        else
        {
            next_height = 210/next_bili;
        }

        var csstext = '@-webkit-keyframes upfrom_'+framesname+'_to_'+next_name + ' {0% {-webkit-transform: translate(0px,-'+changeheight+'px)} 90% {-webkit-transform:translate(0px,-'+(next_height+10)+'px)} 100% {-webkit-transform:translate(0px,-'+next_height+'px)}}';
        console.log(csstext);
        style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);

        id('lineup').style.webkitAnimation = 'upfrom_'+framesname+'_to_'+next_name + ' 0.5s linear both';

        var csstext = '@-webkit-keyframes downfrom_'+framesname+'_to_'+next_name + ' {0% {-webkit-transform: translate(0px,'+changeheight+'px)} 90% {-webkit-transform:translate(0px,'+(next_height+10)+'px)} 100% {-webkit-transform:translate(0px,'+next_height+'px)}}';
        console.log(csstext);
        style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);

        id('linedown').style.webkitAnimation = 'downfrom_'+framesname+'_to_'+next_name + ' 0.5s linear both';
        id('decro').style.webkitAnimation = 'downfrom_'+framesname+'_to_'+next_name + ' 0.5s linear both';        

        var csstext = '@-webkit-keyframes outfrom_'+framesname+'_to_'+next_name + ' {0% {-webkit-transform: scale(1,1);opacity:1;} 90% {-webkit-transform:scale(1,'+(next_height/changeheight)*1.04+');} 100% {-webkit-transform:scale(1,'+next_height/changeheight+');opacity:0;}}';
        console.log(csstext);
        style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);

        var csstext = '@-webkit-keyframes infrom_'+framesname+'_to_'+next_name + ' {100% {-webkit-transform: scale(1,1);opacity:1} 90% {-webkit-transform:scale(1.04,1.04);} 0% {-webkit-transform:scale(1,'+changeheight/next_height+');opacity:0}}';
        console.log(csstext);
        style=document.createElement('style');
        document.head.appendChild(style);
        var sheet=style.sheet;
        sheet.insertRule(csstext,0);

        if(pageindex == 2)
        {
            set_img_position(2)
            id('div1').style.webkitAnimation = 'outfrom_'+framesname+'_to_'+next_name + ' 0.5s ease-in both';
            id('div2').style.webkitAnimation = 'infrom_'+framesname+'_to_'+next_name + ' 0.5s ease-in both';
        }
        else
        {
            set_img_position(1)
            id('div1').style.webkitAnimation = 'infrom_'+framesname+'_to_'+next_name + ' 0.5s ease-in both';
            id('div2').style.webkitAnimation = 'outfrom_'+framesname+'_to_'+next_name + ' 0.5s ease-in both';
        }
        
    }


}

function set_img_position(pageindex)
{
    img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    console.log(img_bili);
    img_width = 420;
    img_height = 420/img_bili;

    var div = id('div'+pageindex);
    var img = id('img'+pageindex);

    div.style.width = '420px';
    div.style.left = '40px';
    img.style.width = '420px';
    img.style.height = img_height + 'px';
    img.src = Onload_imgs_url[image_url_index];
    img.style.left = '0px';
    if(img_bili<0.7)
    {
        img.style.top = (626-img_height)/2+'px';

        div.style.height = '625px';
        div.style.top = (750-626)/2 + 'px';
    }
    else
    {
        img.style.top = '0px';

        div.style.height = img_height + 'px';
        div.style.top = (750-img_height)/2 + 'px';
    }
}

function get_pid(url)
{
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}
function setImageindex()
{
    if(image_url_index == Onload_imgs_url.length)
        image_url_index = 0;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        // console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

     if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    console.log('setimg:' + Onload_imgs_url[image_url_index]);
}

function url_name(url)
{
    if(url == null)
    {
        return '';
    }
    else
    {
        return url.toString().substr(url.lastIndexOf("/") + 1);    
    }
}

call_me(load_images);

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    id('titlebg').style.webkitAnimation = '';
    id('titlecover').style.webkitAnimation = '';
    id('pagetitle').style.webkitAnimation = '';
    id('div1').style.webkitAnimation = '';
    id('div2').style.webkitAnimation = '';
    id('lineup').style.webkitAnimation = '';
    id('linedown').style.webkitAnimation = '';
    id('titlecontent').innerHTML = '';
    id('decro').style.webkitAnimation = '';
    id('lineup').style.opacity = 0;
    id('linedown').style.opacity = 0;
    id('titlebg').style.opacity = 0;

    for(var i=0;i<5;i++)
    {
        clearTimeout(timeout[i]);
    }
}
</script>
